<template>
    <div class="navbar">
        <div class="nav_right">
            <!-- <div class="enter_forum">进入论坛</div>
            <div class="msg_logo">
                <img src="../../static/imgs/msg.png">
            </div> -->
            <span class="invitationCode" v-if="showInviteCode">邀请码:{{invitateCode}}</span>
            <div class='user'>
                <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{name}}<i class="el-icon-caret-bottom el-icon-right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="a">修改资料</el-dropdown-item>
                        <el-dropdown-item command="logoff" divided>注销登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                name:localStorage.userName,
                invitateCode:localStorage.refferal_code,
                showInviteCode:true
            }
        },
        methods: {
            doLogoff(){
                localStorage.removeItem('userName');
                localStorage.removeItem('token');
                this.$router.push('/login');
            },
            handleCommand(command) {
                command == 'logoff' ? this.doLogoff():this.changeInfo();
            }
        },
        created(){
            if(localStorage.refferal_code==''||localStorage.refferal_code=='undefined'){
                this.showInviteCode=false
            }
        }
    }
</script>
<style lang="less" scoped>
    .navbar{
        // position: fixed;
        // z-index: 99999;
        // width: 100%;
        // min-width: 1280px;
        height: 70px;
        background-color: #ffffff;
	    box-shadow: 0px 0px 10px 0px 
        rgba(0, 0, 0, 0.17);
        margin-bottom: 1px;
        .nav_right{
            // width: 380px;
            height: 70px;
            padding: 20px;
            box-sizing: border-box;
            float: right;
            display: flex;
            justify-content: space-around;
            .enter_forum{
                width: 122px;
                height: 32px;
                margin-top: -4px;
                border-radius: 15px;
                text-align: center;
                border: solid 1px #ff4a61;
                line-height: 32px;
                font-weight: 600;
                color: #ff4a61;
            }
            .invitationCode{
                line-height: 32px;
                color: #4c4c4c;
                margin-right:30px;
            }
            .msg_logo{
                border-right: 1px solid #808080;;
                width: 40px;
                img{
                    width: 20px;
                    height: 26px; 
                }
            }
            .user{
                width: 140px;
                color: #4c4c4c;
            }
        }
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #4c4c4c;
        width: 110px;
        font-size: 20px;
        // border: 1px solid red;
    }
    .el-icon-caret-bottom {
        font-size: 20px;
        // border: 1px solid #000;
    } 
    .el-dropdown{
        position: relative;
        color: #606266;
        font-size: 14px;
        width: 218px;
        // border: 1px solid yellow;
    }
    .el-dropdown-menu .el-popper{
        position: fixed;
        width: 100px;
        top: 65px!important;
        left: 1664px;
    }   

    .el-popper[x-placement^=bottom] {
        margin-top: 30px;
        /* margin-right: 86px; */
    }
    
</style>
